<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <!-- 模拟input框的双向绑定 -->
    请输入： <input type="text" id="inp1">
    <p id="p1">p888</p>

    <br />
    <div id="app">
        <input type="text" v-model="inp2">
        <p>{{inp2}}</p>



        <br>
        苹果 <input type="checkbox" name="fruit" id="" value="fruit[0].guo" @change="xuan()">
        香蕉 <input type="checkbox" name="fruit" id="" value="fruit[1].guo" @change="xuan()">
        荔枝<input type="checkbox" name="fruit" id="" value="fruit[2].guo" @change="xuan()">
        哈密瓜 <input type="checkbox" name="fruit" id="" value="fruit[3].guo" @change="xuan()">
        <p id="p2">ghnmjfygj</p>
        <span>{{fruits}}</span>
        <br>
        <br>
        <!-- 水果：
        <input
          type="checkbox"
          value="苹果"
          @change="chex(1)"
          :checked="obj.flag1"
        />苹果
        <input
          type="checkbox"
          value="橘子"
          @change="chex(2)"
          :checked="obj.flag2"
        />橘子
        <input
          type="checkbox"
          value="草莓"
          @change="chex(3)"
          :checked="obj.flag3"
        />草莓
        <p id="chen">{{obj}}</p> -->
    </div>

    <script>
        // for(let i=0;i<document.getElementsByName("fruit").length;i++){
        //     this.fruit.map((i) => {
        //         console.log(i)
        //     });
        // }
        //    var p1 = document.getElementById("p1")
        //    var obj = {
        //        name:''
        //    };
        //    inp1.value = obj.name;
        //    p1.innerHTML = obj.name;


        new Vue({
            el: '#app',
            data() {
                return {
                    inp2: '',
                    fruits: [{
                            guo: '苹果',
                        },
                        {
                            guo: '香蕉',
                        },
                        {
                            guo: '荔枝',
                        },
                        {
                            guo: '哈密瓜',
                        },
                    ],
                    // obj:{},
                }
            },
            created() {

            },
            mounted() {
               
            },
            methods:{
                // chex(i) {
                //     if (i == 1) {
                //         this.obj.flag1 && this.obj.flag1 == true
                //         ? this.$set(this.obj, "flag1", false)
                //         : this.$set(this.obj, "flag1", true);
                //     } else if (i == 2) {
                //         this.obj.flag2 && this.obj.flag2 == true
                //         ? this.$set(this.obj, "flag2", false)
                //         : this.$set(this.obj, "flag2", true);
                //     } else if (i == 3) {
                //         this.obj.flag3 && this.obj.flag3 == true
                //         ? this.$set(this.obj, "flag3", false)
                //         : this.$set(this.obj, "flag3", true);
                //     }
                //     // console.log(this.obj);
                // },
                xuan(){
                    for (let i = 0; i < document.getElementsByName("fruit").length; i++) {
                 
                //    console.log(document.getElementsByName("fruit")[i].checked)
                    if (document.getElementsByName("fruit")[i].checked==true) {
                           this.$set(this.fruits[i], 'flag', 'true')
                        // var obj = {
                        //     name: {}
                        // };
                        // this.fruits[i].guo = obj.name;
                        // console.log(obj)
                    }else{
                        this.$set(this.fruits[i], 'flag', 'false')
                    }
                    // console.log(0)
                }
        
             }

           }
        })

        var inp1 = document.getElementById("inp1")
        var p1 = document.getElementById("p1")
        var obj = {
            name: ''
        };
        inp1.value = obj.name;
        p1.innerHTML = obj.name;
        //    console.log(obj.name) //''
        //defineProperty :定义属性
        //  Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象
        Object.defineProperty(obj, 'name', {
            set(data) {
                console.log(data);
                p1.innerHTML = data
            },
            get(data) {

            }
        })
        inp1.onkeyup = function () {
            obj.name = inp1.value
        }
    </script>
</body>

</html>